<template>
  <div class="sort">
    <div class="left">
      <p :class="{active: !sortField}"
         @click="sortFieldChange(null)">
        默认排序
      </p>
      <p :class="{active: sortField === 'publishTime'}"
         @click="sortFieldChange('publishTime')">
        最新商品
      </p>
      <p :class="{active: sortField === 'orderNum'}"
         @click="sortFieldChange('orderNum')">
        最高人气
      </p>
      <p :class="{active: sortField === 'evaluateNum'}"
         @click="sortFieldChange('evaluateNum')">
        评论最多
      </p>
      <p @click="sortMethodChange">
        价格排序
      <div class="sort-icon">
        <div :class="'up' + (sortMethod === 'asc' ? ' active':'')"/>
        <div :class="'down' + (sortMethod === 'desc' ? ' active':'')"/>
      </div>
      </p>
    </div>
    <div class="right">
      <div :class="{checked: inventory}"
           @click="inventoryChange">
        <i :class="`iconfont icon-${inventory? 'checked': 'unchecked'}`"/>
        仅显示有货商品
      </div>
      <div :class="{checked: onlyDiscount}"
           @click="onlyDiscountChange">
        <i :class="`iconfont icon-${onlyDiscount? 'checked': 'unchecked'}`"/>
        仅显示特惠商品
      </div>
    </div>
  </div>
</template>

<script lang="ts"
        setup>
import {computed, defineEmits, ref} from 'vue'
import {useRoute} from 'vue-router'

let emits = defineEmits<{
  (e: 'sort-change', data: any): void
}>()
let route = useRoute()

// 仅显示有货
let inventory = ref<boolean>(false)
// 仅显示特惠
let onlyDiscount = ref<boolean>(false)
// 排序依据
let sortField = ref<string | null>(null)
// 价格排序方法
let sortMethod = ref<string | null>(null)

// 整体排序规则
let sort = computed((): any => ({
  inventory: inventory.value,
  onlyDiscount: onlyDiscount.value,
  sortField: sortField.value,
  sortMethod: sortMethod.value
}))

function inventoryChange(): void {
  inventory.value = !inventory.value
  emits('sort-change', sort.value)
}

function onlyDiscountChange(): void {
  onlyDiscount.value = !onlyDiscount.value
  emits('sort-change', sort.value)
}

function sortFieldChange(_sortField: string): void {
  sortField.value = _sortField
  sortMethod.value = null
  emits('sort-change', sort.value)
}

function sortMethodChange(): void {
  sortField.value = 'price'
  switch (sortMethod.value) {
    case 'desc':
      sortMethod.value = 'asc'
      break
    default:
      // 为空或者为asc 则改为desc
      sortMethod.value = 'desc'
  }
  emits('sort-change', sort.value)
}
</script>

<style lang="less"
       scoped>
.sort {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .left {
    display: flex;
    justify-content: center;
    align-items: center;

    p {
      cursor: pointer;
      width: 100px;
      height: 30px;
      border-radius: 2px;
      display: flex;
      align-items: center;
      color: #999;
      justify-content: center;
      border: 1px solid #e4e4e4;
      margin-right: 20px;

      &.active {
        color: white;
        background-color: @xtxColor;
      }

      .sort-icon {
        margin-left: 6px;

        * {
          border: 5px solid transparent;
          width: 10px;
          height: 10px;

          & ~ * {
            margin-top: 3px;
          }
        }

        .up {
          border-bottom: 5px solid #999;

          &.active {
            border-bottom: 5px solid @xtxColor;
          }
        }

        .down {
          border-top: 5px solid #999;

          &.active {
            border-top: 5px solid @xtxColor;
          }
        }
      }
    }
  }

  .right {
    display: flex;
    align-items: center;

    div {
      display: flex;
      align-items: center;
      margin-right: 20px;
      color: #999999;
      cursor: pointer;

      i {
        transform: translateY(1px);
        margin-right: 2px;
      }

      &.checked {
        color: @xtxColor;
      }
    }
  }
}
</style>